<template>
  <ul class="contentBox">
    <li class="qiugou" v-for="(i, index) in lists" :key="index">
      <p class="p1">
        <span class="title dh">
          <van-icon class="icontitle" :name="icongm" />{{i.kname}}
        </span>
        <span class="title title2">发布时间：
          {{i.inputdate}}
        </span>
      </p>
      <div class="gongying">
        <div class="gongyingleft">
          <img v-if="!i.img" src="../../assets/img/meetnull.jpg" alt="">
           <img v-else :src="i.img" alt="">
        </div>
        <div class="gongyingright">
          <p class="p2">
            <span class="p-text">
              价格：
              <span class="p-show">{{i.price}} </span>
            </span>
            <span class="p-text">
              数量：
              <span class="p-show">{{i.nums}}</span>
               <span class="p-dw">{{i.unit}}</span>
            </span>
            <span class="p-info">{{i.content}}</span>
          </p>
        </div>
      </div>
      <a class="phone" :href="'tel:'+i.mobile"></a>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
import icongm from "../../assets/img/replaypart/icongm.png";
import iconwz from "../../assets/img/replaypart/iconwz.png";
export default {
    props: ["list"],
    data() {
        return {
            icongm,
            iconwz
        };
    },
    computed: {
        lists() {
            console.log(this.list);
            return this.list;
        }
    },
    methods: {}
};
</script>
<style scoped  lang="less">
.qiugou {
    padding: 0.3rem;
    margin-bottom: 0.3rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 8px 0 rgba(0, 10, 0, 0.2);
    position: relative;
    .phone {
        display: block;
        width: 0.4rem;
        height: 0.4rem;
        background: url("../../assets/img/phone.png") no-repeat;
        background-position: center;
        background-size: cover;
        position: absolute;
        right: 0.3rem;
        bottom: 0.3rem;
    }
    .gongying {
        display: flex;
            position: relative;
        .gongyingleft {
            width: 1.6rem;
            height: 1.68rem;
            // background: red;
            margin-right: 0.3rem;
            border-radius: 0.16rem;
            display: flex;
            // align-items: center;
            // justify-content: center;
            position: relative;
             top: -.06rem;
            
            
        }
        .gongyingright {
            width: 100%;
            flex: 1;
        }
    }

    .p1 {
        display: flex;
        margin-bottom: 0.3rem;
        &:last-child {
            margin-bottom: 0;
        }
        .title {
            width: 50%;
            overflow: hidden;
            font-size: 0.32rem;
            font-weight: bolder;
            color: rgba(39, 41, 55, 1);
            position: relative;
            height: 0.46rem;
            line-height: 0.46rem;
            padding-left: 0.5rem;
            position: relative;
            .icontitle {
                width: 0.4rem;
                height: 0.4rem;
                font-size: 0.4rem;
                margin-right: 0.1rem;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -0.2rem;
            }
        }
        .title2 {
            text-align: right;
            font-size: 0.26rem;
            font-weight: normal;
            color: rgba(228, 152, 41, 1);
            .icontitle {
                width: 0.28rem;
                height: 0.28rem;
                font-size: 0.28rem;
            }
        }
    }
    .p2 {
        display: flex;
        flex-wrap: wrap;
    }
    .p-text {
        width: 50%;
        overflow: hidden;
        font-size: 0.26rem;
        margin-bottom: 0.1rem;
        color: rgba(110, 111, 117, 1);
    }
    .p-show {
        color: rgba(39, 41, 55, 1);
    }
    .p-dw{    color: #6e6f75;
    font-size: .22rem;}
    
    .p-info {
        color: rgba(39, 41, 55, 1);
        line-height: 1.5;

        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }
}
</style>
